<!DOCTYPE>
<html>
    <head>
        <title>Video with poster</title>
        <script>
            function log(str)
            {
                document.getElementById('result').innerText += str + "\n";
            }

            function logLayers(prefix)
            {
                log("Case: " + prefix);
                log(internals.layerTreeAsText(document));
                log("");
            }

            function layerTest()
            {
                var video = document.getElementsByTagName('video')[0];

                switch (event.type)
                {
                    case "load":
                        logLayers("No src, no poster");
                        video.src = "../resources/video." + (video.canPlayType("video/ogg") ? "ogv" : "mp4");
                        video.poster = "../resources/apple.jpg";
                        break;
                    case "canplaythrough":
                        logLayers("Displaying poster");
                        video.currentTime = 0.5;
                        break;
                    case "seeked":
                        logLayers("Displaying movie");
                        if (window.testRunner)
                            testRunner.notifyDone();
                        break;
                }
            }

            if (window.testRunner) {
                testRunner.dumpAsText();
                testRunner.waitUntilDone();
            }
            window.addEventListener('load', layerTest, false);
        </script>
    </head>
    <body>
        <video oncanplaythrough="layerTest()" onseeked="layerTest()"></video>
        
        <p>A &lt;video&gt; should not have a layer until playback begins.<br>
        This test can not be run manually, it requires testRunner.layerTreeAsText.</p>
        <pre id="result"></pre>
    </body>
</html>
